<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <a-row>
          <a-col :span="12">
            <a-form-model-item label="员工号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="workNo">
              <a-input v-model="model.workNo" placeholder="请输入员工号"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="姓名" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="name">
              <a-input v-model="model.name" placeholder="请输入姓名"  ></a-input>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12">
            <a-form-model-item label="性别" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="sex">
              <j-dict-select-tag type="list" v-model="model.sex" dictCode="sex" placeholder="请选择性别" />
            </a-form-model-item>
          </a-col>

          <a-col :span="12">
            <a-form-model-item label="出生日期" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="birthday">
              <j-date placeholder="请选择出生日期" v-model="model.birthday"  style="width: 100%" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12">
            <a-form-model-item label="岗位名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="postName">
              <j-dict-select-tag type="list" v-model="model.postName" dictCode="TEMPORARY_EMPLOYEES_POST_NAME" placeholder="请选择状态" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="通讯地址" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="address">
              <a-input v-model="model.address" placeholder="请输入通讯地址"  ></a-input>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12">
            <a-form-model-item label="部门" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="departId">
              <j-select-depart v-model="model.departId" multi  />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="籍贯" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="nativePlace">
              <j-area-linkage type="cascader" v-model="model.nativePlace" placeholder="请输入省市区"  />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12">
            <a-form-model-item label="健康状态" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="health">
              <a-input v-model="model.health" placeholder="请输入健康状态"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="身份证号码" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="userIdentity">
              <a-input v-model="model.userIdentity" placeholder="请输入身份证号码"  ></a-input>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12">
            <a-form-model-item label="最高学历" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="education">
              <j-dict-select-tag type="list" v-model="model.education" dictCode="EDUCATION_TYPE" placeholder="请选择最高学历" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="技术职务" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="technicalTitle">
              <a-input v-model="model.technicalTitle" placeholder="请输入技术职务"  ></a-input>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12">
            <a-form-model-item label="参加工作时间" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="workDate">
              <j-date placeholder="请选择参加工作时间" v-model="model.workDate"  style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="人员类型" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="workType">
              <j-dict-select-tag type="list" v-model="model.workType" dictCode="TEMPORARY_EMPLOYEES_TYPE" placeholder="请选择人员类型" />
            </a-form-model-item>
          </a-col>
        </a-row>

        <a-row>
          <a-col :span="12">
            <a-form-model-item label="任职开始时间" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="serviceStartTime">
              <j-date placeholder="请选择任职开始时间" v-model="model.serviceStartTime"  style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="任职结束时间" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="serviceEndTime">
              <j-date placeholder="请选择任职结束时间" v-model="model.serviceEndTime"  style="width: 100%" :open="endOpen" />
            </a-form-model-item>
          </a-col>
        </a-row>

        <a-row>
          <a-col :span="12">
            <a-form-model-item label="电话" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="phone">
              <a-input v-model="model.phone" placeholder="请输入电话"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="电子邮箱" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="email">
              <a-input v-model="model.email" placeholder="请输入电子邮箱"  ></a-input>
            </a-form-model-item>
          </a-col>
        </a-row>

        <a-row>
          <a-col :span="12">
            <a-form-model-item label="银行卡号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="bankCardNumber">
              <a-input v-model="model.bankCardNumber" placeholder="请输入银行卡号"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="银行卡开户行" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="bankName">
              <a-input v-model="model.bankName" placeholder="请输入银行卡开户行"  ></a-input>
            </a-form-model-item>
          </a-col>
        </a-row>

        <a-row>
          <a-col :span="12">
            <a-form-model-item label="状态" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="status">
              <j-dict-select-tag type="list" v-model="model.status" dictCode="user_status" placeholder="请选择状态" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="是否有社保" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="socialSecurity">
              <j-dict-select-tag type="list" v-model="model.socialSecurity" dictCode="yn_status" placeholder="请选择是否有社保" />
            </a-form-model-item>
          </a-col>
        </a-row>

        <a-row>
          <a-col :span="12">
            <a-form-model-item label="社保证明1"  :labelCol="labelCol" :wrapperCol="wrapperCol" prop="socialSecurityFilePath1">
              <j-image-upload class="social_security_file_uploader" bizPath="sicial_security_files" text="上传" v-model="model.socialSecurityFilePath1" ></j-image-upload>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="社保证明2" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="socialSecurityFilePath2">
              <j-image-upload class="social_security_file_uploader" bizPath="sicial_security_files" text="上传" v-model="model.socialSecurityFilePath2" ></j-image-upload>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </j-form-container>
  </a-spin>
</template>

<script>

import { httpAction, getAction } from '@/api/manage'
import { validateDuplicateValue } from '@/utils/util'

export default {
  name: 'TemporaryEmployeesForm',
  components: {
  },
  props: {
    //表单禁用
    disabled: {
      type: Boolean,
      default: false,
      required: false
    }
  },
  data () {
    return {
      endOpen: false,
      model:{
        status:1
      },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      confirmLoading: false,
      validatorRules: {
        workNo: [
          { required: true, message: '请输入员工号!'},
        ],
        name: [
          { required: true, message: '请输入姓名!'},
        ],
        sex: [
          { required: true, message: '请输入性别!'},
        ],
        birthday: [
          { required: true, message: '请输入出生日期!'},
        ],
        departId: [
          { required: true, message: '请输入部门Id!'},
        ],
        nativePlace: [
          { required: true, message: '请输入籍贯!'},
        ],
        health: [
          { required: true, message: '请输入健康状态!'},
        ],
        userIdentity: [
          { required: true, message: '请输入身份证号码!'},
        ],
        education: [
          { required: true, message: '请输入最高学历!'},
        ],
        workDate: [
          { required: true, message: '请输入参加工作时间!'},
        ],
        serviceStartTime: [
          { required: true, message: '请输入任职开始时间!'},
        ],
        serviceEndTime: [
          { required: true, message: '请输入任职结束时间!'},
        ],
        status: [
          { required: true, message: '请选择员工状态!'},
        ],
        email: [
          { required: false},
          { pattern: /^([\w]+\.*)([\w]+)@[\w]+\.\w{3}(\.\w{2}|)$/, message: '请输入正确的电子邮件!'},
        ],
        postName: [
          { required: true, message: '请选择岗位名称!'},
        ],
        bankCardNumber: [
          { required: true, message: '请输入银行卡号!'},
        ],
        bankName: [
          { required: true, message: '请输入银行卡开户行名称!'},
        ],
      },
      url: {
        add: "temporaryEmployees/add",
        edit: "temporaryEmployees/edit",
        queryById: "temporaryEmployees/queryById"
      }
    }
  },
  computed: {
    formDisabled(){
      return this.disabled
    },
  },
  created () {
    //备份model原始值
    this.modelDefault = JSON.parse(JSON.stringify(this.model));
  },
  methods: {
    add () {
      this.edit(this.modelDefault);
    },
    edit (record) {
      this.model = Object.assign({}, record);
      this.visible = true;
    },
    submitForm () {
      const that = this;
      // 触发表单验证
      this.$refs.form.validate(valid => {
        if (valid) {
          that.confirmLoading = true;
          let httpurl = '';
          let method = '';
          if(!this.model.id){
            httpurl+=this.url.add;
            method = 'post';
          }else{
            httpurl+=this.url.edit;
            method = 'put';
          }
          httpAction(httpurl,this.model,method).then((res)=>{
            if(res.success){
              that.$message.success(res.message);
              that.$emit('ok');
            }else{
              that.$message.warning(res.message);
            }
          }).finally(() => {
            that.confirmLoading = false;
          })
        }

      })
    },
  }
}
</script>


<style scoped>
  .social_security_file_uploader > .ant-upload {
    width:104px;
    height:104px;
  }
  .ant-upload-select-picture-card i {
    font-size: 49px;
    color: #999;
  }

  .ant-upload-select-picture-card .ant-upload-text {
    margin-top: 8px;
    color: #666;
  }

  .ant-table-tbody .ant-table-row td{
    padding-top:10px;
    padding-bottom:10px;
  }

  .drawer-bootom-button {
    position: absolute;
    bottom: -8px;
    width: 100%;
    border-top: 1px solid #e8e8e8;
    padding: 10px 16px;
    text-align: right;
    left: 0;
    background: #fff;
    border-radius: 0 0 2px 2px;
  }
</style>